<template>
	<!-- 采购员个人中心 -->
	<view>
		<view class="top" @click="toperment">
			<view class="circle">
				<image class="head" :src="list.headimg" mode="widthFix"></image>
			</view>
			<view class="top-texts">
				<text class="name">{{list.empname}}</text>
				<hr>
				<text>所属部门:  {{dptname}}</text>
				<view>
					<text>绑定手机：{{list.tel}}</text>
				</view>
			</view>
			<view class="top-img">
				<image src="../../../static/paimg/跳转.png"></image>
			</view>
		</view>
		<!-- 下部 -->
		<view class="index">
			<text class="title">使用指南</text>
				<view class="cell" style="border-top:1px solid #ccc ;" @click="changpass()">
					<view class="cell-left">
						<image class="cell_icon" src="../../../static/paimg/修改密码.png"></image>
						<text class="cell-text">修改密码</text>
					</view>
					<view class="cell-right">
						<image class="right-arrow" src="../../../static/paimg/right-arrow.png"></image>
					</view>
				</view>
				<view class="cell" style="border-top:1px solid #ccc;border-bottom: 1px solid #ccc;" @click="topage('conment')">
					<view class="cell-left">
						<image class="cell_icon" src="../../../static/paimg/联系我们.png"></image>
						<text class="cell-text">联系我们</text>
					</view>
					<view class="cell-right">
						<image class="right-arrow" src="../../../static/paimg/right-arrow.png"></image>
					</view>
				</view>
				<view class="cell" @click="topage('helpment')" style="border-bottom: 1px solid #ccc;">
					<view class="cell-left">
						<image class="cell_icon" src="../../../static/paimg/帮助.png"></image>
						<text class="cell-text">使用帮助</text>
					</view>
					<view class="cell-right">
						<image class="right-arrow" src="../../../static/paimg/right-arrow.png"></image>
					</view>
				</view>
				<view class="cell" @click="topage('abtment')">
					<view class="cell-left">
						<image class="cell_icon" src="../../../static/paimg/关于.png"></image>
						<text class="cell-text">关于</text>
					</view>
					<view class="cell-right">
						<image class="right-arrow" src="../../../static/paimg/right-arrow.png"></image>
					</view>
				</view>	
			</view>
			<view><u-tabbar :active-color="activeColor" :list="tabBerList" ></u-tabbar></view>
		</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				activeColor: '#17abe3',account:'',
				list:{},dptname:'采购部'
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    this.$store.commit('setRoleId',2)
			uni.setStorageSync('storage_key', 'tabbuyer');
			this.account = uni.getStorageSync('account');
			this.getdata();
		},
		computed: {
			...mapState([
				'tabBerList',
			])
		},
		methods: {
			async getdata(){
				const res =await this.Request({
					url:'api/employee/getempdataby',
					method:'POST',
					data:{account:this.account}
				})
				this.list = res.data[0]
			},
			toperment(){
				uni.navigateTo({
					url:'/pages/public/homepage/perinformation?account='+this.account
				})
			},
			changpass(){
				uni.navigateTo({
					url:'/pages/public/homepage/validation?account='+this.account
				})
			},
			topage(e){
				uni.navigateTo({
					url:'/pages/public/homepage/'+e
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		margin-top: 10px;
		display: flex;
		width: 100%;
		height: 250upx;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 20px;
		.circle {
			margin-left: 40px;
			height: 60px;
			width: 60px;
			border-radius: 50upx;
			.head {
				width: 120upx;
				height: 120upx;
				border-radius: 150upx;
			}
		}
		.top-texts {
			width: 250px;
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			.name{
				font-size: 36upx;
				font-weight: 500;
			}
		}
		.top-img image{
			margin-right: 40px;
			height: 25px;
			width: 25px;
		}
	}
	.logout{
		margin-top: 50upx;
		button{
			width:80%;
		}
	}
	.index {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #f8f8f8;
		margin-top: 30px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		.title{
			margin: 10px 0 10px 10px;
			font-size: 17px;
			color: #d3ba5d;
		}
		.cell {
			display: flex;
			align-items: center;
			// border-bottom: 1px solid #ccc;
			height: 90upx;
			justify-content: space-between; 
			.cell-left {
				display: flex;
				align-items: center;
				margin-left: 65upx;
				.cell_icon {
					width: 40upx;
					height: 40upx;
				}
				.cell-text {
					margin-left: 25upx;
				}
			}
			.cell-right {
				margin-right: 45upx;
				height: 28upx;
				.right-arrow {
					color: #aaa;
					width: 15upx;
					height: 28upx;
				}
			}
		}
		.cell:active {
			background-color: #333;
			color: white;
			box-shadow: 1upx 1upx 35upx #ccc;
		}
	}
</style>